<template>
  <div class="home_header">
    <div v-if="showtop" class="top_banner">
      <template v-if="topbanner">
      <a :href="topbanner[0].link">
        <img style="max-height:300px;object-fit: cover" :src="topbanner[0].image" alt="">
      </a>
      </template>
    </div>
    <div class="topnav">
      <div class="secbox">
        <span class="fl">HI，欢迎来青岛华章，华章MBA全国47家分校，您的MBA备考管家</span>
      </div>
    </div>
    <div class="logo_box">
      <h1>
        <nuxt-link to="/">
          <img style="width:180px;height:60px;" :src="settings.logo1.val" alt="">
          <img :src="settings.logo2.val" alt="">
        </nuxt-link>
      </h1>
      <div v-if="settings.days.val<100" class="down_time">
        <h3>管理类联考倒计时</h3>
        <div class="time_last">
          <span>{{day}}</span>
          <strong>天</strong>
          <span>{{hour}}</span>
          <strong>时</strong>
          <span>{{min}}</span>
          <strong>分</strong>
          <span>{{sec}}</span>
          <strong>秒</strong>
        </div>
      </div>
      <div v-else class="main_search">
        <el-input v-model="searchVal" placeholder="您感兴趣的内容"></el-input>
        <i>搜索:</i>
        <button @click="search(searchVal)">搜索</button>
      </div>
      <div class="phone_sign">
        <div class="telbox">
          <p>
            <svg t="1566900458831" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="3745" width="27" height="27">
              <path
                d="M512 92.724409c-221.732283 0-403.149606 181.417323-403.149606 403.149607s181.417323 403.149606 403.149606 403.149606 403.149606-181.417323 403.149606-403.149606-181.417323-403.149606-403.149606-403.149607z m104.818898 636.976378c-24.188976 12.094488-52.409449 8.062992-76.598426-8.062992-4.031496 0-4.031496-4.031496-8.062992-4.031496-4.031496-4.031496-76.598425-68.535433-124.976378-177.385827S358.80315 334.614173 358.80315 330.582677v-4.031496c4.031496-28.220472 20.15748-52.409449 48.377952-68.535433 36.283465-16.125984 84.661417 0 100.787402 36.283465s0 84.661417-36.283465 100.787401h-4.031496c4.031496 28.220472 16.125984 64.503937 32.251969 100.787402 16.125984 36.283465 36.283465 68.535433 56.440945 88.692913 0 0 4.031496 0 4.031496-4.031496 36.283465-16.125984 84.661417 0 100.787401 36.283465 12.094488 48.377953-4.031496 96.755906-44.346456 112.881889z"
                p-id="3746" fill="#f5364c"></path>
            </svg>
            <span>{{settings.contact.val}}</span>
          </p>
          <span id="tongyi" style="font-size:14px;color:#7d8389;padding-left: 5px">全国统一学习专线 8:30-21:00</span>
        </div>
      </div>
    </div>
    <div id="navbox" class="homenav">
      <ul :id="rightNavShow?'rightvh':''" :class="navLeft?'secbox mainnav':'secbox mainnav flexlayout'">
        <div @click="rightNavShow = !rightNavShow" class="right_bi"><img src="../assets/img/rightone.png" alt=""></div>
        <li v-if="navLeft" id="kljk" class="m fl home curr"><h3><a href="javascript:;">课程分类</a></h3>
          <ul class="sub0">
            <li>
              <b>
                <nuxt-link :to="{path:'/newsdetail',query:{cate_id:28,anchor:'热点资讯',id:187,apipath:'articles',detailpath:'articledetail'}}">工商管理硕士（MBA）</nuxt-link>
              </b>
              <br>
              <nuxt-link target="_blank" :to="{path:'newslist',query:{cate_id:1,anchor:'工商管理硕士（MBA）',apipath:'articles',detailpath:'articledetail'}}">院校库</nuxt-link>
              |
              <nuxt-link target="_blank" :to="{path:'/classcenter'}">课程中心</nuxt-link>
            </li>
            <li>
              <b>
                <nuxt-link :to="{path:'/newsdetail',query:{cate_id:28,id:188,anchor:'热点资讯',apipath:'articles',detailpath:'articledetail'}}">高级工商管理硕士（EMBA）</nuxt-link>
              </b>
              <br>
              <nuxt-link target="_blank" :to="{path:'newslist',query:{cate_id:4,anchor:'高级工商管理硕士（EMBA）',apipath:'articles',detailpath:'articledetail'}}">院校库</nuxt-link>
              |
              <nuxt-link target="_blank" :to="{path:'/classcenter'}">课程中心</nuxt-link>
            </li>
            <li><b><nuxt-link :to="{path:'/newsdetail',query:{cate_id:28,id:189,anchor:'热点资讯',apipath:'articles',detailpath:'articledetail'}}">会计硕士（MPACC）</nuxt-link></b><br>
              <nuxt-link  :to="{path:'newslist',query:{cate_id:10,anchor:'会计硕士（MPACC）',apipath:'articles',detailpath:'articledetail'}}">院校库</nuxt-link>
              |
              <nuxt-link  :to="{path:'/classcenter'}">课程中心</nuxt-link>
            </li>
            <li><b><nuxt-link :to="{path:'/newsdetail',query:{cate_id:28,id:190,anchor:'热点资讯',apipath:'articles',detailpath:'articledetail'}}">公共管理硕士（MPA）</nuxt-link></b><br>
              <nuxt-link  :to="{path:'newslist',query:{cate_id:13,anchor:'公共管理硕士（MPA）',apipath:'articles',detailpath:'articledetail'}}">院校库</nuxt-link>
              |
              <nuxt-link target="_blank" :to="{path:'/classcenter'}">课程中心</nuxt-link>
            </li>
            <li><b><nuxt-link :to="{path:'/newsdetail',query:{cate_id:28,id:191,anchor:'热点资讯',apipath:'articles',detailpath:'articledetail'}}">旅游管理硕士（MTA）</nuxt-link></b><br>
              <nuxt-link  :to="{path:'newslist',query:{cate_id:19,anchor:'旅游管理硕士（MTA）',apipath:'articles',detailpath:'articledetail'}}">院校库</nuxt-link>
              |
              <nuxt-link  :to="{path:'/classcenter'}">课程中心</nuxt-link>
            </li>
            <li style="border:none"><b><nuxt-link :to="{path:'/newsdetail',query:{cate_id:28,id:192,anchor:'热点资讯',apipath:'articles',detailpath:'articledetail'}}">工程管理硕士（MEM）</nuxt-link></b><br>
              <nuxt-link target="_blank" :to="{path:'newslist',query:{cate_id:16,anchor:'工程管理硕士（MEM）',apipath:'articles',detailpath:'articledetail'}}">院校库</nuxt-link>
              |
              <nuxt-link target="_blank" :to="{path:'/classcenter'}">课程中心</nuxt-link>
            </li>
          </ul>
        </li>
        <li class="m">
          <h3>
            <nuxt-link to="/">首页</nuxt-link>
          </h3>
        </li>
        <li class="m"><h3><nuxt-link to="/tutoring">辅导课程</nuxt-link></h3>
          <ul class="sub">
            <li>
              <nuxt-link  to="/counseling">面试辅导</nuxt-link>
            </li>
            <li>
              <nuxt-link  to="/tutoring">笔试辅导</nuxt-link>
            </li>
          </ul>
        </li>
        <li class="m"><h3><nuxt-link :to="{path:'newslist',query:{cate_id:1,anchor:'工商管理硕士（MBA）',apipath:'articles',detailpath:'articledetail'}}">院校库</nuxt-link></h3>
          <ul class="sub extsub">
            <li><nuxt-link :to="{path:'newslist',query:{cate_id:1,anchor:'MBA院校库',apipath:'articles',detailpath:'articledetail'}}">MBA院校库</nuxt-link></li>
            <li><nuxt-link :to="{path:'newslist',query:{cate_id:4,anchor:'EMBA院校库',apipath:'articles',detailpath:'articledetail'}}">EMBA院校库</nuxt-link></li>
            <li><nuxt-link :to="{path:'newslist',query:{cate_id:13,anchor:'MPA院校库',apipath:'articles',detailpath:'articledetail'}}">MPA院校库</nuxt-link></li>
            <li><nuxt-link :to="{path:'newslist',query:{cate_id:10,anchor:'MPAcc院校库',apipath:'articles',detailpath:'articledetail'}}">MPAcc院校库</nuxt-link></li>
            <li><nuxt-link :to="{path:'newslist',query:{cate_id:16,anchor:'MEM院校库',apipath:'articles',detailpath:'articledetail'}}">MEM院校库</nuxt-link></li>
          </ul>
        </li>
        <li class="m hot">
          <h3>
            <nuxt-link  :to="{path:'/databases'}">华章资料库</nuxt-link>
          </h3>
        </li>
        <li class="m"><h3><a target="_blank" href="http://v.hzmba.com/default.htm">在线试听</a></h3></li>
        <li class="m">
          <h3>
            <nuxt-link :to="{path:'newsdetail',query:{cate_id:23,id:194,anchor:'关于我们',apipath:'articles',detailpath:'articledetail'}}">关于我们</nuxt-link>
          </h3>
        </li>
        <li v-if="navLeft" class="m fr"><h3><a
         target="_blank" href="http://p.qiao.baidu.com/cps/chat?siteId=13067632&amp;userId=24620165">在线预约课程</a></h3></li>
      </ul>
      <div @click="rightNavShow = !rightNavShow" class="three-ss">
        <img src="../assets/img/leftone.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Home-header",
        props: {
            settings: '',
            showtop: '',
            navLeft: false,
        },
        data() {
            return {
                searchVal:'',
                rightNavShow:false,
                config: '',
                day: '',
                hour: '',
                sec: '',
                min: '',
                topbanner:'',
            }
        },
        created() {
            if(this.showtop){
                this.$apiGet('banners',{cate_id:2}).then(res=>{
                    this.topbanner = res.data;
                })
            }
            if (this.settings.days.val <100) {
                this.downTime(this.settings.examination_time.val)
            }
        },
        methods: {
            search(e){
                 if(e){
                   this.$apiGet('articlesearch',{
                       keywords:e,
                       page:1,
                       limit:3,
                   }).then(res=>{
                       //console.log(res);
                       if(res.data.length>0){
                           //console.log(this.$route.name)
                           this.$router.push({name:'newslist',query:{keywords:e}})
                           // if(this.$route.name=='newslist'){
                           //
                           // }else {
                           //
                           //     console.log(654456)
                           // }
                       }else{
                           this.$message.error('暂无搜索内容')
                       }
                   })
                 }else {
                     this.$message.error('请输入要搜索的内容')
                 }
            },
            downTime(time) {
                let nowTime = time;
                var funtureDate = new Date(nowTime);
                if (funtureDate.getTime() < new Date().getTime()) {
                    this.day = '00';
                    this.hour = '00';
                    this.sec = '00';
                    this.min = '00';
                } else {
                    setInterval(()=> {
                        //3.获取现在的时间
                        var presentDate = new Date();
                        //4.获取时间戳
                        var funtureTime = funtureDate.getTime();
                        var presenTime = presentDate.getTime();
                        //5.获取剩余的时间戳
                        var allTime = funtureTime - presenTime;
                        //6.把毫秒转换为秒
                        var allSecond = parseInt(allTime / 1000);
                        //7.获取剩余多少天
                        var day = this.size(parseInt(allSecond / 3600 / 24));
                        //8.获取剩余多少小时
                        var hour = this.size(parseInt(allSecond / 3600 % 24));
                        //9.获取剩余多少分钟
                        var minute = this.size(parseInt(allSecond / 60 % 60));
                        //10.获取剩余多少秒
                        var second = this.size(parseInt(allSecond % 60));
                        //11.注入：
                        this.day = day;
                        this.hour =hour;
                        this.min = minute;
                        this.sec = second;
                    }, 1000);
                }
                //2.设置定时器
            },
            //如果数>=10,则在前面补0
            size(num) {
                return num < 10 & num >= 0 ? '0' + num : num;
            }
        },
    }
</script>

<style scoped>
.right_bi {
  display: none;
}
.three-ss p {
    width: 30px;
    margin: 0 auto;
    border: 1.5px solid black;
    transition: transform 200ms ease;
}
  .three-ss {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top:-16px;
    transition: transform 200ms ease;
    width: auto;
    height: auto;
    display: none;
    flex-direction: column;
    justify-content: space-between;
  }
  .main_search i {
    position: absolute;
    font-size: 15px;
    left: 25px;
    top: 50%;
    margin-top: -19px;
    display: -webkit-box;
    display: flex;
    height: 38px;
    -webkit-box-align: center;
    align-items: center;
  }

  .main_search {
    position: relative;
  }
  @media (max-width: 850px) {
    .three-ss {
      display: flex;
    }
    .right_bi {
      padding: 10px;
      box-sizing: border-box;
      display:flex;
    }
    #kljk {
      display: none;
    }
    .mainnav li.fr a {
      background: #fff;
      color:#000;
    }
  }
</style>
